import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import AsyncLoad from '../components/AsyncLoad';
import { object } from 'prop-types';
import NavTitle from '../containers/NavTitle';
import Navbar from '../containers/UserNavBar';
export const AsyncCenter = AsyncLoad({
  //账户首页
  loader: () => import('../containers/User.js')
});
const AsyncOrder = AsyncLoad({
  //我的订单
  loader: () => import('../containers/user/MyOrder.js')
});
const AsyncOrderDetail = AsyncLoad({
  //订单详情
  loader: () => import('../containers/user/OrderDetail.js')
});
const AsyncInfo = AsyncLoad({
  //修改个人信息
  loader: () => import('../containers/user/EditInfo')
});
const AsyncComment = AsyncLoad({
  //我的评论
  loader: () => import('../containers/user/Comment')
});
const AsyncCollect = AsyncLoad({
  //我的收藏
  loader: () => import('../containers/user/MyCollection')
});
const AsyncMessage = AsyncLoad({
  //我的消息
  loader: () => import('../containers/user/Message')
});
const AsyncCoupon = AsyncLoad({
  //我的优惠券
  loader: () => import('../containers/user/Coupon')
});

const AsyncSecurity = AsyncLoad({
  //安全设置
  loader: () => import('../containers/user/Security')
});
const AsyncChangePsd = AsyncLoad({
  //修改密码
  loader: () => import('../containers/user/ChangePsd.js')
});
const AsyncChangeCell = AsyncLoad({
  //更新绑定
  loader: () => import('../containers/user/BindPhone.js')
});
export class User extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="user content">
        <NavTitle />
        <div className="dfr">
          <div>
            <Navbar />
          </div>
          <div style={{ marginLeft: '0.96rem' }} />
          <Switch>
            <Route exact path="/user" component={AsyncCenter} />
            <Route path="/user/center" component={AsyncCenter} />
            <Route exact path="/user/order" component={AsyncOrder} />
            <Route path="/user/order/detail" component={AsyncOrderDetail} />
            <Route path="/user/info" component={AsyncInfo} />
            <Route path="/user/comment" component={AsyncComment} />
            <Route path="/user/collect" component={AsyncCollect} />
            <Route path="/user/message" component={AsyncMessage} />
            <Route path="/user/coupon" component={AsyncCoupon} />
            <Route exact path="/user/security" component={AsyncSecurity} />
            <Route path="/user/security/psd" component={AsyncChangePsd} />
            <Route path="/user/security/cell" component={AsyncChangeCell} />
            {/* <Route  path="/user/security/cell" component={AsyncChangeCell}/> */}

            {/*             <Route path="/user/point" component={AsyncPoint} />           */}
          </Switch>
        </div>
      </div>
    );
  }
}
const contextTypes = {
  router: object.isRequired
};
User.contextTypes = contextTypes;
const mapStateToProps = state => ({});
const mapDispatchToProps = {};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(User);
